<template>
  <div id="myInfo">
    <div class="header">
      <div class="breadcrumb">
        <router-link :to="{ path: '/' }">
          <span style="font-weight: normal">首页</span></router-link
        >
        <a-icon class="icon-right" type="right"/>
        <span>我的</span
        >
        <a-icon class="icon-right" type="right"/>
        <span>个人资料</span>
      </div>
    </div>

    <div class="myInfo-center">
      <p class="revise">
        <UpdateMyInfo @fatherMethod="getMyInfo()"/>
      </p>

      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="头像-大图" style="width: 100%" :src="$store.state.imgBaseUrl + previewImage"/>
      </a-modal>
      <div style="max-width: 1500px" class="form-container">
        <div style="margin-bottom: 30px; font-size: 20px;" class="form-panel">个人资料</div>
        <div style="display: flex; overflow-x: auto" class="form-panel">
          <div style="flex: none; margin-left: 50px;">
            <a-form>
              <a-form-item label="头像" class="form-item-inline">
                <a
                    style="display: inline-block; margin-left: 0px"
                    href="javascript:;"
                    @click="showModal"
                ><img
                    class="avatar"
                    :src="userInfo.avatar"
                    alt="头像"
                    title="点击查看大图"
                    width="88"
                    height="88"
                /></a>
                <a-upload
                    name="file"
                    :action="
                $store.state.imgBaseUrl +
                'upload/avatar/' +
                this.$route.params.username
              "
                    @change="handleChange"
                    class="upload-avatar"
                >
                  <a-button type="link" class="update-avatar">
                    <a-icon type="upload"/>
                    <span style="font-size: 14px">
                  更换头像</span
                    >
                  </a-button>
                </a-upload>
              </a-form-item>
              <a-form-item label="账号" class="form-item-inline">
                <span>
                  {{ userInfo.username }}
                  <a-tooltip v-if="userInfo.auth == 4" title="点击购买会员">
                    <a-tag
                        color="blue"
                        style="font-size: 14px"
                        @click="changeStatus(userInfo.auth)"
                    >
                      普通用户
                    </a-tag>
                  </a-tooltip>
                  <a-tag
                      v-else
                      color="orange"
                      style="font-size: 14px"
                      @click="changeStatus(userInfo.auth)"
                  >
                    会员
                  </a-tag>
                </span>
              </a-form-item>

              <a-form-item label="昵称" class="form-item-inline">
                <span>{{ userInfo.nickName }}</span>
              </a-form-item>
              <a-form-item label="姓名" class="form-item-inline">
                <span> {{ userInfo.realName }}</span>
              </a-form-item>
              <a-form-item label="性别" class="form-item-inline">
                <span> {{ userInfo.gender }}</span>
              </a-form-item>
            </a-form>
          </div>
          <div style="flex: none; margin-left: 40px">
            <a-form>
              <a-form-item label="生日" class="form-item-inline">
                <span>{{ userInfo.birthday }}</span>
              </a-form-item>
              <a-form-item label="年龄" class="form-item-inline">
                <span>{{ age }}</span>
              </a-form-item>
              <a-form-item label="星座" class="form-item-inline">
                <span>{{ constellation }}</span>
              </a-form-item>
              <a-form-item label="手机号码" class="form-item-inline">
                <span>{{ userInfo.phone }}</span>
              </a-form-item>
              <a-form-item class="form-item-inline">
            <span slot="label" style="font-size: 14px">
              邮箱地址
              <a-tooltip title="注册时已经绑定，暂不支持修改">
                <a-icon type="question-circle-o"/>
              </a-tooltip>
            </span>
                <span>{{ userInfo.email }}</span>
              </a-form-item>
              <a-form-item label="所在地区" class="form-item-inline">
                <span>{{ userInfo.address }}</span>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
      <!--普通用户显示      -->
      <a-modal
          title="购买会员"
          visible.sync="visible"
          on-ok="commonConfirm"
          onCancel="commonCancel"
          v-model="common"
          style="min-height: 300px; "
      >
        <div
            style="display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 500px;">
          <p v-show="alipay" style="font-size: 30px; font-weight: bold; margin-bottom: 20px;">欢迎使用支付宝支付</p>
          <img :src="require('@/assets/img/alipay.jpg')"
               alt="支付宝支付二维码"
               style="max-width: 80px; min-width: 200px;"
               v-show="alipay">
          <p v-show="wechat" style="font-size: 30px; font-weight: bold; margin-top: 20px;">欢迎使用微信支付</p>
          <img :src="require('@/assets/img/wechat.jpg')"
               alt="微信支付二维码"
               style="max-width: 80px; min-width: 200px;"
               v-show="wechat">
        </div>
        <div style="min-height: 100px; margin-top: 20px; margin-left: 100px">
          <a-button style="font-size: 16px; height: 40px; margin-right: 10px; align-items: center;" @click="alipayShow">
            <a-icon type="alipay-circle" theme="outlined" style="font-size: 24px; color: #2684ca;"/>
            <span style="margin-left: 8px;">支付宝支付</span>
          </a-button>
          <a-button style="font-size: 16px; height: 40px; align-items: center;" @click="wechatShow">
            <a-icon type="wechat" theme="outlined" style="font-size: 24px; color: #67c23a"/>
            <span style="margin-left: 8px;">微信支付</span>
          </a-button>
        </div>
        <template #footer>
          <a-button key="back" @click="commonCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" @click="commonConfirm">
            确定
          </a-button>
        </template>
      </a-modal>
      <!--vip用户显示      -->
      <a-modal v-show="vip">
        <p style="font-size: 30px; font-weight: bold">你已经购买vip，无需再次购买。</p>
        <template #footer>
          <a-button key="back" @click="vipCancel">
            取消
          </a-button>
        </template>
      </a-modal>
    </div>
    <!--    <dashboard/>-->
    <!-- <div class="myInfo-bottom"></div> -->
  </div>
</template>

<script>
import UpdateMyInfo from "@/views/mine/components/UpdateMyInfo";
import dashboard from "@/views/dashboard/predict"

export default {
  components: {UpdateMyInfo, dashboard},
  data() {
    return {
      userInfo: {},
      age: "",
      constellation: "",
      previewVisible: false,
      previewImage: "",
      form: '',
      common: false,
      vip: false,
      alipay: true,
      wechat: false,
    };
  },
  methods: {
    handleChange(info) {
      if (info.file.status === "done") {
        // console.log(info.file);
        // console.log(info.file.response.data.data);
        let userInfo = this.$store.getters.getUser;
        userInfo.avatar = info.file.response.data.data.avatar;
        this.$store.commit("SET_USERINFO", userInfo);
        this.$message.success(`头像更换成功！`);
        const {href} = this.$router.resolve({
          name: "我的资料",
          path: "/mine/info/" + this.$route.params.username,
        });
        window.open(href, "_self");
      } else if (info.file.status === "error") {
        this.$message.error(`上传失败！`);
      }
    },
    handleCancel() {
      this.previewVisible = false;
    },
    showModal() {
      this.previewVisible = true;
      this.previewImage = this.userInfo.avatar;
    },
    getMyInfo() {
      let username = this.$route.params.username;
      // console.log(username);
      this.$axios
          .get("/front/user/info/" + username, {
            headers: {
              Authorization: localStorage.getItem("token"),
            },
          })
          .then((res) => {
            // console.log(res);
            this.userInfo = res.data.data.data;
            if (
                res.data.data.data.avatar == "" ||
                res.data.data.data.avatar == null
            ) {
              this.userInfo.avatar =
                  "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
            } else {
              this.userInfo.avatar =
                  this.$store.state.imgBaseUrl + res.data.data.data.avatar;
            }
            this.age = this.getAge(res.data.data.data.birthday);
            this.constellation = this.getConstellation(
                res.data.data.data.birthday
            );
            this.formatAddress(res.data.data.data.address);
            // console.log(this.userInfo);
          });
    },
    formatAddress(address) {
      if (address != null && address != "") {
        let addressArr = address.split("/");
        let str = "";
        for (const item of addressArr) {
          str += item;
        }
        this.userInfo.address = str;
      } else {
        return "";
      }
    },
    /* 计算年龄 */
    getAge(birthday) {
      if (birthday == null || birthday == "") {
        return "";
      } else {
        let date = new Date();
        // 得到当前时间
        let yearNow = date.getFullYear();
        let monthNow = date.getMonth() + 1;
        let dayNow = date.getDate();
        // 把生日分成年月日
        if (birthday != "" || birthday != null) {
          let str = birthday.split("-");

          let yearBirth = str[0];
          let monthBirth = str[1];
          let dayBirth = str[2];
          if (monthNow < monthBirth) {
            let age = yearNow - yearBirth - 1;
            return age;
          } else if (monthNow > monthBirth) {
            let age = yearNow - yearBirth;
            return age;
          } else {
            if (dayNow < dayBirth) {
              let age = yearNow - yearBirth - 1;
              return age;
            } else {
              let age = yearNow - yearBirth;
              return age;
            }
          }
        }
      }
    },
    /* 判断星座 */
    getConstellation(birthday) {
      // 把生日分成年月日
      if (null != birthday && birthday != "") {
        let str = birthday.split("-");

        let monthBirth = str[1];
        let dayBirth = str[2];

        if (monthBirth == 1) {
          return dayBirth < 21 ? "摩羯座" : "水瓶座";
        } else if (monthBirth == 2) {
          return dayBirth < 20 ? "水瓶座" : "双鱼座";
        } else if (monthBirth == 3) {
          return dayBirth < 21 ? "双鱼座" : "白羊座";
        } else if (monthBirth == 4) {
          return dayBirth < 21 ? "白羊座" : "金牛座";
        } else if (monthBirth == 5) {
          return dayBirth < 22 ? "金牛座" : "双子座";
        } else if (monthBirth == 6) {
          return dayBirth < 22 ? "双子座" : "巨蟹座";
        } else if (monthBirth == 7) {
          return dayBirth < 23 ? "巨蟹座" : "狮子座";
        } else if (monthBirth == 8) {
          return dayBirth < 24 ? "狮子座" : "处女座";
        } else if (monthBirth == 9) {
          return dayBirth < 24 ? "处女座" : "天秤座";
        } else if (monthBirth == 10) {
          return dayBirth < 24 ? "天秤座" : "天蝎座";
        } else if (monthBirth == 11) {
          return dayBirth < 23 ? "天蝎座" : "射手座";
        } else if (monthBirth == 12) {
          return dayBirth < 22 ? "射手座" : "摩羯座";
        }
      } else {
        return "";
      }
    },
    changeStatus(status) {
      if (status == '4') {
        this.common = true;
      } else if (status == '3') {
        this.vip = true;
      }
    },
    commonConfirm() {
      let info = JSON.parse(sessionStorage.getItem('userInfo'));
      console.log(info.id)
      this.$axios.post("/user/upgrade/vip/" + info.id).then((res) => {
        console.log(res);
      })
      this.$message.success('购买会员成功');
      this.getMyInfo();
      this.common = false;
    },
    vipCancel() {
      this.vip = false;
    },
    commonCancel() {
      this.common = false;
    },
    alipayShow() {
      this.alipay = true;
      this.wechat = false;
    },
    wechatShow() {
      this.alipay = false;
      this.wechat = true;
    },
  },
  created() {
    this.getMyInfo();
  },
};
</script>

<style>
@import "./style/myInfo.css";

.form-item-inline {
  display: flex;
  align-items: center;
  /* //max-width: 1500px; */
}

/* 默认情况下，两个表单垂直堆叠 */
.parent-container {
  display: block;
}

/* 当屏幕宽度大于或等于768px时，两个表单并排显示 */
@media (min-width: 768px) {
  .parent-container {
    display: flex;
    justify-content: space-between;
  }
}

.form-panel {
  flex: 1;
  margin-left: 50px; /* 第一个面板不需要左边距 */
}

.form-panel:first-child {
  margin-left: 0;
}

.form-item-inline .ant-form-item-label {
  font-weight: bold; /* 表单项标签加粗 */
  margin-right: 5px;
}

.form-item-inline span {
  font-size: 14px;
  color: #333; /* 回显文本颜色 */
}

.form-item-inline a-tooltip {
  font-size: 12px;
  color: #666; /* 提示文本颜色，与回显文本区分 */
}
</style>
